<template>
  <div class="todo-list">
    <div v-if="loading" class="todo-loading">
      <el-skeleton v-for="i in 3" :key="i" animated>
        <template #template>
          <el-skeleton-item variant="text" style="width: 80%" />
          <el-skeleton-item variant="text" style="width: 60%" />
        </template>
      </el-skeleton>
    </div>
    
    <div v-else-if="todos.length === 0" class="todo-empty">
      <el-empty description="暂无待办事项" :image-size="80" />
    </div>
    
    <div v-else class="todo-items">
      <div 
        v-for="todo in todos" 
        :key="todo.id"
        class="todo-item"
        :class="{ completed: todo.completed, [`priority-${todo.priority}`]: true }"
      >
        <el-checkbox 
          v-model="todo.completed" 
          @change="handleComplete(todo)"
          :disabled="todo.completed"
        />
        
        <div class="todo-content" @click="handleClick(todo)">
          <div class="todo-title" :class="{ 'completed-text': todo.completed }">
            {{ todo.title }}
          </div>
          <div class="todo-desc" :class="{ 'completed-text': todo.completed }">
            {{ todo.description }}
          </div>
          <div class="todo-meta">
            <el-tag 
              v-if="todo.priority === 'high'" 
              type="danger" 
              size="small"
              effect="light"
            >
              紧急
            </el-tag>
            <el-tag 
              v-else-if="todo.priority === 'medium'" 
              type="warning" 
              size="small"
              effect="light"
            >
              重要
            </el-tag>
            <el-tag 
              v-else 
              type="info" 
              size="small"
              effect="light"
            >
              普通
            </el-tag>
            <span v-if="todo.dueDate" class="todo-due">
              截止: {{ formatDate(todo.dueDate) }}
            </span>
          </div>
        </div>
        
        <div class="todo-actions">
          <el-button 
            v-if="!todo.completed && todo.actionUrl" 
            type="primary" 
            link 
            @click.stop="handleAction(todo)"
          >
            处理
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface TodoItem {
  id: string
  title: string
  description: string
  type: 'reconciliation' | 'review'
  priority: 'high' | 'medium' | 'low'
  completed: boolean
  dueDate?: string
  actionUrl?: string
}

interface Props {
  todos: TodoItem[]
  loading?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['todo-click', 'todo-complete'])

const handleComplete = (todo: TodoItem) => {
  emit('todo-complete', todo)
}

const handleClick = (todo: TodoItem) => {
  if (!todo.completed) {
    emit('todo-click', todo)
  }
}

const handleAction = (todo: TodoItem) => {
  emit('todo-click', todo)
}

const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric'
  })
}
</script>

<style scoped lang="scss">
.todo-list {
  .todo-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    
    .el-skeleton {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }
  
  .todo-empty {
    padding: 20px 0;
  }
  
  .todo-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .todo-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid #f0f0f0;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #e8f4ff;
        background: #fafafa;
      }
      
      &.completed {
        opacity: 0.7;
        background: #f9f9f9;
      }
      
      &.priority-high {
        border-left: 3px solid #f5222d;
      }
      
      &.priority-medium {
        border-left: 3px solid #fa8c16;
      }
      
      &.priority-low {
        border-left: 3px solid #1890ff;
      }
      
      .todo-content {
        flex: 1;
        cursor: pointer;
        
        .todo-title {
          font-weight: 500;
          color: #1f2d3d;
          margin-bottom: 4px;
          
          &.completed-text {
            text-decoration: line-through;
            color: #909399;
          }
        }
        
        .todo-desc {
          font-size: 13px;
          color: #606266;
          margin-bottom: 8px;
          
          &.completed-text {
            text-decoration: line-through;
            color: #c0c4cc;
          }
        }
        
        .todo-meta {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .todo-due {
            font-size: 12px;
            color: #909399;
          }
        }
      }
      
      .todo-actions {
        flex-shrink: 0;
      }
    }
  }
}
</style>